<template>
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <ul>
        <li v-for="item in goodsList" :key="item" @click="goAbout(item.proid)">
          <div>
            <img :src="item.img1" alt="" />
            <h6>{{ item.proname }}</h6>
            <p>￥{{ item.originprice }}</p>
          </div>
        </li>
      </ul>
    </van-list>
</template>

<script>
import { GoodsProList } from "../../service/pro.js";
export default {
  data() {
    return {
      count: 1,
      limitNum: 10, // 每页显示个数
      goodsList: [], // 商品数据列表
      loading: false, // 是否加载完成
      finished: false, // 加载是否结束
    };
  },
  created() {},
  methods: {
    onLoad() {
      GoodsProList(this.count, this.limitNum).then((res) => {
        console.log(res.data);
        if (res.data.code === "200") {
          res.data.data.forEach((item) => {
            this.goodsList.push(item);
          });
          // console.log(this.goodsList.length);
        }
      });
      // 加载状态结束;
      // this.loading = false;
      this.count++;

      // 数据全部加载完成;
      // if (this.goodsList.length >= 150) {
      //   this.finished = true;
      // }
    },
    goAbout(val) {
      this.$router.push({ path: "/about", query: { id: val } });
    },
  },
};
</script>
<style scoped>
img {
  width: 100%;
  height: 100%;
  display: block;
}
ul,
li {
  list-style: none;
}
ul {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
li {
  width: 48%;
  /* height: 320px; */
  margin-right: 1%;
}
li > div {
  width: 100%;
  height: 100%;
}
li > div > img {
  height: 200px;
}
li > div > h6 {
  display: -webkit-box;
  overflow: hidden;
  flex-direction: row;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin: 0;
  line-height: 20px;
  margin-top: 10px;
}

li > div > p {
  color: red;
  font-weight: 700;
  margin: 1.333333vw 0;
  padding-bottom: 10px;
}
.van-list{
  margin-bottom: 50px;
}
</style>
